<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="选择模型">
        <el-select v-model="selectedModelId" placeholder="请选择">
          <el-option
            v-for="m in models"
            :key="m.id"
            :label="m.name"
            :value="m.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="showForm" style="margin: 20px 0;">
      <el-form label-width="120px">
        <el-form-item label="API输入参数">
          <el-input v-model="apiInput" placeholder="如：设备ID" />
        </el-form-item>
        <el-form-item label="API输出参数">
          <el-input v-model="apiOutput" placeholder="如：维护建议内容" />
        </el-form-item>
        <el-form-item label="版本描述">
          <el-input v-model="versionDesc" placeholder="如：优化了推理速度" />
        </el-form-item>
        <el-form-item label="访问权限">
          <el-select v-model="permissionUsers" multiple placeholder="请选择用户">
            <el-option
              v-for="u in users"
              :key="u.id"
              :label="u.name"
              :value="u.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addServing">服务化封装</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider>服务化模型列表</el-divider>
    <el-table :data="servingList" style="width: 100%;">
      <el-table-column prop="modelName" label="模型" />
      <el-table-column prop="apiInput" label="API输入" />
      <el-table-column prop="apiOutput" label="API输出" />
      <el-table-column prop="version" label="版本" />
      <el-table-column prop="versionDesc" label="版本描述" />
      <el-table-column label="访问权限">
        <template slot-scope="scope">
          {{ getPermissionNames(scope.row.permissions) }}
        </template>
      </el-table-column>
      <el-table-column label="历史记录">
        <template slot-scope="scope">
          {{ getHistoryDesc(scope.row.history) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateServing(scope.row)">修改权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
  import { Message } from 'element-ui';
  export default {
    name: 'ServingPanel',
    props: ['models', 'servingList', 'users'],
    data() {
      return {
        selectedModelId: '',
        apiInput: '',
        apiOutput: '',
        versionDesc: '',
        permissionUsers: [],
        showForm: false
      };
    },
    watch: {
      selectedModelId(val) {
        this.showForm = !!val;
        if (val) {
          const model = this.models.find(m => m.id === val);
          this.apiInput = '设备ID';
          this.apiOutput = '维护建议内容';
          this.versionDesc = '';
          this.permissionUsers = model ? [...model.permissions] : [];
        }
      }
    },
    methods: {
      addServing() {
        if (!this.selectedModelId) {
          Message.warning('请选择模型');
          return;
        }
        if (!this.apiInput || !this.apiOutput) {
          Message.warning('请填写API参数');
          return;
        }
        this.$emit('add-serving', {
          modelId: this.selectedModelId,
          apiInput: this.apiInput,
          apiOutput: this.apiOutput,
          versionDesc: this.versionDesc,
          permissions: this.permissionUsers
        });
      },
      updateServing(serving) {
        this.$emit('update-serving', serving);
      },
      getPermissionNames(permissions) {
        if (!permissions || !Array.isArray(permissions)) return '';
        return permissions.map(u => {
          const user = this.users.find(us => us.id === u);
          return user ? user.name : u;
        }).join('、');
      },
      getHistoryDesc(history) {
        if (!history || !Array.isArray(history)) return '';
        return history.map(h => h.version + ':' + h.desc).join('；');
      }
    }
  };
  </script>